<template>
  <div class="specialDetail">
    <van-nav-bar title="专栏详情" left-arrow @click-left="$router.back()" />
    <div class="count">
      <h4>{{ detailMsg.title }}</h4>
      <img :src="detailMsg.pic" alt="" />
      <div v-html="detailMsg.content"></div>
    </div>
    
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getNewDetail } from "../../api/second/index";
import { useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    let id = route.query.id;
    // console.log(id);
    const data = reactive({
      detailMsg: {},
    });
    getNewDetail({ id: id }).then((res) => {
      data.detailMsg = res.data;
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.specialDetail {
  height: 100%;
  .count {
    height: calc(100% - 46px);
    overflow: auto;
    padding: 0 10px;
    h4 {
      text-align: center;
      margin-top: 50px;
    }
    img {
      width: 100%;
      margin-top: 15px;
    }
    :deep(p) {
      font-size: 16px;
      line-height: 40px;
      color: #333;
      text-indent: 32px;
    }
  }
}

</style>